<template>
  <div ref="wrappers" class="wrapper-box">
    <div class="swiper-box">
      <run-bo></run-bo>
      <xt-biao></xt-biao>
      <singer-list :singerLis="singerList"></singer-list>
      <play-list :playlists="playsList" :tit="tit"></play-list>
      <!-- <play-list :playlists="playList[listss[1]]" :tit="playList[listss[0]].name"></play-list> -->
      <music-happy></music-happy>
      <h1>1</h1>
      <div class="jjj"></div>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import RunBo from '@/components/lbt.vue'
import XtBiao from '@/components/fonts.vue'
import SingerList from '@/components/singer-list.vue'
import PlayList from '@/components/play-list.vue'
import MusicHappy from '@/components/music-happy.vue'
// 获取随机数
import { getRandom } from '@/common/js/util'
// 热歌推荐
import { getDiscList, getBoutiqueList, getBoutiqueSing } from '@/api/recomment.js'

// 提前歌单数据
import { createSong, createSongs } from '@/common/js/song.js'
// 验证码
import { ERR_OK } from '@/common/js/common.js'
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      // 推荐歌单数据
      discList: [],
      // 推荐歌单部分数据
      discSmo: [],
      // 数据条数
      discListLeng: 0,
      // 歌曲数据
      singerList: [
        { name: '人气歌单', singers: [] },
        { name: '人气歌单2' }
      ],
      // 歌单数
      limi: 10,
      // 打乱歌单
      listss: [],
      // 精选歌单
      playList: [],
      // 精选歌单名称
      tit: '',
      // 精选歌单歌曲
      playsList: []
    }
  },
  components: {
    RunBo,
    XtBiao,
    SingerList,
    PlayList,
    MusicHappy
  },
  methods: {
    // 获取歌单
    _getDiscList () {
      getDiscList().then(async (res) => {
        if (res.status === ERR_OK) {
          this.discList = await res.data.result
          this.discListLeng = this.discList.length
          this._getDiscLists()
        }
      })
    },
    // 获取随机6个歌单
    _getDiscLists () {
      var lists = getRandom(6, this.discList.length)
      var list = []
      for (var i = 0; i < lists.length; i++) {
        list.push(this.discList[lists[i]])
      }
      this.discSmo = list
      this.singerList[0].singers = this.discSmo
      // console.log(this.singerList)
    },
    // 获取精选歌单
    _getBoutiqueList () {
      getBoutiqueList(this.limi).then((res) => {
        if (res.status === ERR_OK) {
          this.playList = this._normalizeSongs(res.data.playlists)
          // console.log(this.playList)
          this._getBoutiqueLists()
          this.tit = this.playList[this.listss[0]].name
          var id = this.playList[this.listss[0]].id
          this._getBoutiqueSing(id)
        }
      })
    },
    // 分发歌单
    _getBoutiqueLists () {
      this.listss = getRandom(10, this.limi)
    },
    // 获取歌单内歌曲
    _getBoutiqueSing (id) {
      getBoutiqueSing(id).then(async (res) => {
        if (res.status === ERR_OK) {
          this.playsList = this._normalizeSongss(res.data.playlist.tracks)
          // console.log(this.playsList)
        }
      })
    },
    // 提取数据
    _normalizeSongs (list) {
      var ret = []
      list.forEach((list) => {
        if (list) {
          ret.push(createSong(list))
        }
      })
      return ret
    },
    // 提取数据
    _normalizeSongss (list) {
      var ret = []
      list.forEach((list) => {
        if (list) {
          ret.push(createSongs(list))
        }
      })
      return ret
    }
  },
  mounted () {
    // console.log(99999)
    this._getDiscList()
    this._getBoutiqueList()
    const options = {
      click: true,
      tap: true
    }
    setTimeout(() => {
      this.scroll = new BScroll(this.$refs.wrappers, options)
      console.log(this.scroll)
    }, 2000)
  }
}
</script>

<style scoped lang="less">
.wrapper-box {
  height: 100%
}
/*补充底部80px像素值*/
.jjj{
  height: 80px;
}
</style>
